<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        width: 600px;
        margin: 10px auto;
      }

      .tb {
        border-collapse: collapse;
        width: 100%;
      }

      .tb th {
        background-color: #0094ff;
        color: white;
      }

      .tb td,
      .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
      }

      .footer {
        display: flex;
        justify-content: flex-end;
      }

      .active {
        color: red;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <table class="tb">
        <thead>
          <tr>
            <th>Id</th>
            <th>名字</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in books">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
          </tr>
        </tbody>
      </table>

      <div class="footer">
        <div>
          <button :disabled="page === 1" @click="jump(page - 1)">Prev</button>
          <button
            v-for="item in pageCount"
            :class="{active: item === page}"
            @click="jump(item)"
          >
            {{ item }}
          </button>
          <button :disabled="page === pageCount" @click="jump(page + 1)">
            Next
          </button>
        </div>
      </div>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";
      import Axios from "./lib/axios.esm.browser.js";

      createApp({
        data() {
          return {
            books: [], // 用于存放接口返回的书籍列表

            page: 1, // 页码
            pageSize: 2, // 每页显示条数
            total: 1, // 数据总条数，会在接口调用完成之后重新赋值
          };
        },

        computed: {
          pageCount() {
            return Math.ceil(this.total / this.pageSize);
          },
        },

        methods: {
          // 获取数据
          getData() {
            Axios.get("http://localhost:3000/books", {
              // ?号传递参数
              params: {
                _page: this.page,
                _limit: this.pageSize,
              },
            }).then((response) => {
              // response 是一个 axios 包装对象，里面的 data 才是接口真实的返回值
              console.log("response", response);

              // 获取接口返回值的数组
              const data = response.data;

              // 将 data 赋值给 books
              this.books = data;
              // 给 total 赋值
              this.total = +response.headers["x-total-count"];
            });
          },

          // 跳转到num页
          jump(num) {
            if (this.page === num) {
              return;
            }

            this.page = num;

            // 重新调用 getData 获取数据
            this.getData();
          },
        },

        mounted() {
          // 调用 getData 函数
          this.getData();
        },
      }).mount("#app");
    </script>
  </body>
</html>
